<template>
    <div>
        <div style='margin-bottom: 20px;'>
            <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
                @finish="onFinish">
                <a-row :gutter="24">
                    <a-col :span="6">
                        <a-form-item name="username" label="用户名称">
                            <a-input v-model:value="formState[`username`]" placeholder="请输入"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item name="techname" label="技师名称">
                            <a-input v-model:value="formState[`techname`]" placeholder="请输入"></a-input>
                        </a-form-item>
                    </a-col>

                    <a-col :span="6">
                        <a-form-item name="refund_date" label="取消申请时间段">
                            <a-range-picker v-model:value="formState[`refund_date`]" show-time
                                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
                        </a-form-item>
                    </a-col>

                    <a-col :span="15">
                        <a-form-item name="state" label="退款状态">
                            <a-radio-group v-model:value="formState['state']">
                                <a-radio-button value="">全部</a-radio-button>
                                <a-radio-button value="91">未接单</a-radio-button>
                                <a-radio-button value="92">已接单</a-radio-button>
                                <a-radio-button value="93">已出发</a-radio-button>
                                <a-radio-button value="94">达到目的地</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span="15">
                        <a-form-item name="provider" label="支付方式">
                            <a-radio-group v-model:value="formState['provider']">
                                <a-radio-button value="">全部</a-radio-button>
                                <a-radio-button value="alipay">支付宝</a-radio-button>
                                <a-radio-button value="wxpay">微信</a-radio-button>
                                <a-radio-button value="balance">余额</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>

                </a-row>
                <a-row>

                    <a-col :span="24" style="text-align: right">
                        <a-button type="primary" html-type="submit">查询</a-button>
                        <a-button style="margin: 0 8px" @click="() => { formRef.resetFields(); onFinish() }">重置</a-button>

                    </a-col>
                </a-row>
            </a-form>
            <a-table bordered :data-source="dataSource" :columns="columns"
                :pagination="{ current, pageSize, total: totalCount }" @change="pageClick"
                :customRow="record => { return { onClick: () => handleRowClick(record) } }">

                <template #bodyCell="{ column, text, record }">

                    <template v-if="column.dataIndex == 'state'">
                        <a-tag color="purple" >{{ share.getOrderState(record.state)}}</a-tag>
                    </template>
                    <template v-if="column.dataIndex == 'provider'">
                        <span :style="{color: share.getPayWay(record.provider)[1]}" >{{ share.getPayWay(record.provider)[0] }}</span>
                    </template>
                    <template v-if="column.dataIndex == 'refund_state'">
                        <span :style="{color: share.getExamineState(record.refund_state)[1]}" v-if="record.refund_state == 0">{{ share.getExamineState(record.refund_state)[0] }}</span>
                        
                    </template>
                </template>
            </a-table>
        </div>
        <a-modal v-model:visible="visible" title="项目信息" :width="850">
            <template #footer>
                <a-button type="primary" @click="handleOk">确定</a-button>
            </template>
            <div class="conent">
                <div class="flexs">
                    <div class="con">
                        <span>订单UID:</span>
                        <span class="gj">{{ data.uid }}</span>
                    </div>
                    <div class="con">
                        <span>退款时间:</span>
                        <span>{{ data.refund_date}}</span>
                    </div>
                    <div class="con">
                        <span>客户UID:</span>
                        <span>{{ data.user_uid }}</span>
                    </div>
                    <div class="con">
                        <span>客户昵称:</span>
                        <span>{{ data.nickname }}</span>
                    </div>

                    <div class="con">
                        <span>技师UID:</span>
                        <span>{{ data.technician_uid }}</span>
                    </div>
                    <div class="con">
                        <span>技师名称:</span>
                        <span>{{ data.name }}</span>
                    </div>
                    <div class="con">
                        <span>优惠劵UID:</span>
                        <span>{{ data.coupon_uid }}</span>
                    </div>
                    <div class="con">
                        <span>优惠金额:</span>
                        <span class="gj">{{ data.preferential }}(元)</span>
                    </div>
                    <div class="con">
                        <span>项目总额:</span>
                        <span class="gj">{{ data.amount }}(元)</span>
                    </div>
                    <div class="con">
                        <span>实际支付:</span>
                        <span class="gj">{{ data.total }}(元)</span>
                    </div>
                    <div class="con">
                        <span>退款金额:</span>
                        <span class="gj">{{ data.amountTo }}(元)</span>
                    </div>
                    <div class="con">
                        <span>扣除订单费:</span>
                        <span class="gj">{{ data.deduct_amount }}(元)</span>
                    </div>
                    <div class="con">
                        <span>扣除车费:</span>
                        <span class="gj">{{ data.fare_amount }}(元)</span>
                    </div>
                    <div class="con">
                        <span>扣除空单费:</span>
                        <span class="gj">{{ data.deduct_empty}}(元)</span>
                    </div>
                    <div class="con">
                        <span>扣除其他:</span>
                        <span class="gj">{{ data.deduct_other }}(元)</span>
                    </div>
                    <div class="con">
                        <span>订单总时长:</span>
                        <span>{{ data.duration }}(分钟)</span>
                    </div> 
                    <div class="con">
                        <span>退款时状态:</span>
                        <span style="color:#FF7967 " v-if="data.state == 91" :value="data.state">{{ share.getOrderState(data.state).slice(0,-2) }}</span>
                    </div>
                </div>
                <div class="title">订单摘要:</div>
                <textarea v-model="data.demand" disabled
                    style="width: 100%;height: 80px;padding: 10px 0 0 12px;box-sizing: border-box;"></textarea>
                <div class="title">退款原因:</div>
                <textarea v-model="data.reason" disabled
                    style="width: 100%;height: 80px;padding: 10px 0 0 12px;box-sizing: border-box;"></textarea>
                <div class="title">其他备注:</div>
                <textarea v-model="data.other_note" disabled
                    style="width: 100%;height: 80px;padding: 10px 0 0 12px;box-sizing: border-box;"></textarea>
                <div class="title">
                    <span style="margin-right: 20px;">审核状态:</span>
                    <a-radio-group v-model:value="showForm.value">
                        <a-radio :value="1">审核通过</a-radio>
                        <a-radio :value="2">审核不通过</a-radio>
                    </a-radio-group>
                </div>
                <div class="title" v-show="showForm.value==2">不通过原因:</div>
                <textarea v-if="showForm.value==2" v-model="showForm.text" 
                    style="width: 100%;height: 80px;padding: 10px 0 0 12px;box-sizing: border-box;" placeholder="请输入内容，但不要出现非法字符'|'"></textarea>
            </div>
        </a-modal>
    </div>
</template>


<script setup>
import { ref, onMounted, reactive } from 'vue'

import { useUserData } from '../../../stores/userData';
import { useRouter } from 'vue-router';
import share from '../../../util/commnet'
import { message } from 'ant-design-vue';
import {debounce} from 'lodash'

import { deductAPI } from '../../../api/management';
import { reportAPI } from '../../../api/report';
const store = useUserData();
const router = useRouter();



const formRef = ref('');    //搜索数据

const formState = reactive({  //搜素内容
    state: '',
    username: "",
    techname: '',
    provider: '',
    refund_date: [],
});
const dataSource = ref([{}]);   //表格数据
const totalCount = ref(0);      //总条
const pageSize = ref(10);       //一页多少条
const current = ref(1);         //当前页
const columns = [{
    title: '订单uid',
    dataIndex: 'uid',
    align: 'center'
}, {
    title: '用户名称',
    dataIndex: 'nickname',
    align: 'center'

}, {
    title: "技师名称",
    dataIndex: "name",
    align: 'center',
    width: 150
}, {
    title: '支付方式',
    dataIndex: 'provider',
    align: 'center'

},{
    title:'申请时间',
    dataIndex:"refund_date",
    align:'center'
} ,{
    title: "退款时订单状态",
    dataIndex: 'state',
    align: 'center'

}, {
    title: '当前状态',
    dataIndex: 'refund_state',
    align: 'center'

}, {
    title: "实付金额",
    dataIndex: "total",
    align: 'center'
},{
    title:"应退款金额",
    dataIndex:"amountTo",
    align:"center"
}];

const onFinish = () => {  //条件查询
    pageClick();
}

const debouncePageClick = debounce(async(item)=>{       //防抖
    item ? current.value = item.current : current.value = 1;
    let res = await deductAPI(`sel|${formState.state}|${formState.username}|${formState.techname}|${formState.provider}|${formState.refund_date}|${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    dataSource.value = res.data;
    totalCount.value = res.total - 0;
},300)

const pageClick = async (item) => {  //页面发生变化时 或者各种被调用
    debouncePageClick(item);

}



// 点击详情
const data = ref({});
const visible = ref(false);
const showForm = reactive({
    value:'',
    text:''

})
const handleOk = async () => {
    if(showForm.value<1){
        message.error("请选择审核结果");
        return
    }
    if(showForm.text.includes('|')){
        message.error("数据包含非法字符 |")
        return
    }
    let res = await deductAPI(`review|${data.value.uid}|${data.value.state}|${showForm.value}|${showForm.value==1?'':showForm.text}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    } 
    message.success("审核成功");
    visible.value = false;
    pageClick();
}

const handleRowClick = async (item) => {
    let res = await await deductAPI(`selDan|${item.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    } else if (res.data.length < 1) {
        message.error(res.message);
    }
    visible.value = true;
    data.value = res.data[0];
    showForm.text = '';
    showForm.value = '';
}


onMounted(async () => {
    let res = await deductAPI(`sel|${formState.state}|${formState.username}|${formState.techname}|${formState.provider}|${formState.cancellation_date}|${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    dataSource.value = res.data;
})


</script>


<style scoped src="../../css/home/deduct.scss" />

